<!--直播间页面-->
<template lang="pug">
  kalix-master
    div.main1.center-box
      div.float
        img(src="/static/liveDetails" height="50" width="50")
      div.float.live-room
        div.live-top
          <!--p {{this.routerName.liveName}}-->
          p 授课教师的直播间
        div.live-bottom
          <!--p.float {{this.routerName.userName}}-->
          p.float 授课教师
          <!--p.float {{this.routerName.type}}-->
          p.float 类别
          <!--p.float 观看人数 {{this.liveNum}}-->
          p.float 观看人数 {{this.liveNum}}
          div(@click="btnCollection" :class='this.isShow == true?"gray":"green"').shoucang {{txt}}
          div.clear
      div.clear
    div.main2.center-box
      div.video.float
        div
          LiveVideo(:videoSrc="videoSrc" width="870" height="570" ref="videoPlay")
      div.chat-room
        div.nav
          div.float(v-for="(text, key) in textArray" @click="visit(text,key)" :class='key==selected?"bg-recover":""') {{text}}
          div.clear
        div.chat-content
          div.answer(v-if="selected===0")
            div.answer-content(ref="arrPush")
              div.quiz-person(v-for="(item, index) in redata")
                p.name.float {{item.sender}}：
                p.quiz-content.float {{item.message}}
                div.clear
            div.quiz()
              input(type="text" placeholder="请输入问题内容" @keyup.enter="send" maxlength="53")
              button(ref="faSong" v-show="time === 'in'").send 发送
              button(ref="faSongs" v-show="time === 'out'").noSend {{jiShi}}praise
          div.lesson(v-if="selected===1")
            h1 课程名称
            p.teacher 授课教师
            div
              span.strong 课时：
              span 12课时
            div
              span.strong 学分：
              span 3.0
            div
              div.float.strong 课程简介：
              div.float.detail 啥傲娇少女的你你啥都没说的妈二房的法庭甘为人梯二投入到
              div.clear
          div.teacher-intro(v-if="selected===2")
            div.teacher-top
              div.float
                img(src="/static/liveDetails" height="70" width="70")
              div.introduce.float
                div.intro-top
                  p {{this.routerName.userName}}
                div.intro-bottom
                  p.float 职称
                  p.float 学历
                  div.clear
              div.clear
            div.teacher-bottom
              div.strong.float 教师简介：
              div.float.detail asdfasdfasdf asasfasdfasdf aef asdf asd fasdf asdf awefasdfawef
              div.clear
      div.clear
    div.student
      div.studentL
        div(v-for="(item, index) in course" @click="liveStu(item, index)" :class='index==couList?"bg-cou":""').liveCourse {{item}}
      div.studentR
        div(v-if="couList===0")
          div
        div(v-if="couList===1")
          div.nodeList(
          v-for="(item, index) in multi.slice((currentPage-1)*pagesize,currentPage*pagesize) "
          :key="index"
          )
            div.headPortrait
              router-link(:to="{name: 'NoteDetails'}")
                img(:src="item.leftImg")
            div.headCenter
              div.headName
                router-link(:to="{name: 'NoteDetails'}")
                  span.userName {{item.name}}
                span.collect 收藏
              router-link(:to="{name: 'NoteDetails'}")
                div.nodeTitle {{item.title}}
              router-link(:to="{name: 'NoteDetails'}")
                div.nodeCenter {{item.content}}
              div.nodeImg(v-for="son in  article")
                router-link(:to="{name: 'NoteDetails'}")
                  img(:src="son.img")
              div.headBottom
                router-link(:to="{name: 'NoteDetails'}")
                  span 2019-05-20
                  span 15:32
                  span 阅读: 1400
                div.praise
                  img(src="static/OpenPage/u1158.png")
                  span 502
                div.reply
                  img(src="static/OpenPage/u1154.png")
                  span 200
            img(src="static/note/u6816.png").wire
          el-pagination.page(
          @current-change="current_change"
          :current-page="currentPage"
          :pager-count= 11
          prev-text="上一页"
          next-text="下一页"
          :page-size="pagesize"
          layout="total, prev, pager, next, jumper"
          :total="multi.length"
          )
        div(v-if="couList===2")
          Discuss(:discussArray="discussArray.slice((currentPage-1)*pagesize,currentPage*pagesize)")
          div.paging
            el-pagination(
            @size-change="handleSizeChange"
            @current-change="current_change"
            :current-page.sync="currentPage"
            :page-size="pagesize"
            prev-text="上一页"
            next-text="下一页"
            layout="prev, pager, next, total, jumper"
            :total="multi.length")
        div(v-if="couList===3")
          Review(:reviewData="reviewData")
</template>
<script>
  export default {
    data() {
      return {
        videoSrc: '/static/movie/77816626-1-6.mp4',
        websock: null,
        course: [
          '课程学员',
          '课程笔记',
          '课程讨论',
          '课程评论'
        ],
        courseArray: 0,
        isActive: false,
        isvisit: false,
        selected: 0,
        couList: 0,
        isShow: true,
        txt: '收藏',
        liveNum: 0,
        jiShi: 5,
        routerName: {},
        timer: '',
        time: 'in',
        textArray: [
          '在线答疑',
          '课程简介',
          '教师简介'
        ],
        answer: true,
        redata: [],
        videoConfig: {
          videoSrc: '',
          danmuContent: '',
          videoWidth: '870',
          videoHeight: '570'
        },
        uid: null,
        collectId: null,
        xingxing: [],
        fl: true,
        exp: /草|原|傻|逼/g,
        multi: [
          {
            name: '尼古拉斯赵四',
            leftImg: 'static/OpenPage/用户头像_u1176.png',
            title: '东北舞王是怎样炼成的',
            content: '这世界要是没有爱情，它在我们心中还会有什么意义！这就如一盏没有亮光的走马灯。时间是一切财富中最宝贵的财富。这世界要是没有爱情，它在我们心中还会有什么意义！这就如一盏没有亮光的走马灯。时间是一切财富中最宝贵的财富。这世界要是没有爱情，它在我们心中还会有什么意义！这就如一盏没有亮光的走马灯。时间是一切财富中最宝贵的财富。这世界要是没有爱情，它在我们心中还会有什么意义！这就如一盏没有亮光的走马灯。时间是一切财富中最宝贵的财富。这世界要是没有爱情，它在我们心中还会有什么意义！这就如一盏没有亮光的走马灯。时间是一切财富中最宝贵的财富。 —— 德奥弗拉斯多时间是一切财富中最宝贵的财富。 —— 德奥弗拉斯多时间是一切财富中最宝贵的财富。 —— 德奥弗拉斯多'
          },
          {
            name: '尼古拉斯赵四',
            leftImg: 'static/OpenPage/用户头像_u1176.png',
            title: '东北舞王是怎样炼成的',
            content: '这世界要是没有爱情，它在我们心中还会有什么意义！这就如一盏没有亮光的走马灯。时间是一切财富中最宝贵的财富。 —— 德奥弗拉斯多时间是一切财富中最宝贵的财富。 —— 德奥弗拉斯多时间是一切财富中最宝贵的财富。 —— 德奥弗拉斯多时间是一切财富中最宝贵的财富。 —— 德奥弗拉斯多时间是一切财富中最宝贵的财富。 —— 德奥弗拉斯多时间是一切财富中最宝贵的财富。 —— 德奥弗拉斯多'
          },
          {
            name: '尼古拉斯赵四',
            leftImg: 'static/OpenPage/用户头像_u1176.png',
            title: '东北舞王是怎样炼成的',
            content: '这世界要是没有爱情，它在我们心中还会有什么意义！这就如一盏没有亮光的走马灯。这世界要是没有爱情，它在我们心中还会有什么意义！这就如一盏没有亮光的走马灯。这世界要是没有爱情，它在我们心中还会有什么意义！这就如一盏没有亮光的走马灯。这世界要是没有爱情，它在我们心中还会有什么意义！这就如一盏没有亮光的走马灯。'
          },
          {
            name: '尼古拉斯赵四',
            leftImg: 'static/OpenPage/用户头像_u1176.png',
            title: '东北舞王是怎样炼成的',
            content: '这世界要是没有爱情，它在我们心中还会有什么意义！这就如一盏没有亮光的走马灯。这世界要是没有爱情，它在我们心中还会有什么意义！这就如一盏没有亮光的走马灯。这世界要是没有爱情，它在我们心中还会有什么意义！这就如一盏没有亮光的走马灯。这世界要是没有爱情，它在我们心中还会有什么意义！这就如一盏没有亮光的走马灯。这世界要是没有爱情，它在我们心中还会有什么意义！这就如一盏没有亮光的走马灯。这世界要是没有爱情，它在我们心中还会有什么意义！这就如一盏没有亮光的走马灯。这世界要是没有爱情，它在我们心中还会有什么意义！这就如一盏没有亮光的走马灯。这世界要是没有爱情，它在我们心中还会有什么意义！这就如一盏没有亮光的走马灯。'
          }
        ],
        article: [
          {img: 'static/OpenPage/u1164.png'},
          {img: 'static/OpenPage/u1164.png'},
          {img: 'static/OpenPage/u1164.png'},
          {img: 'static/OpenPage/u1164.png'}
        ],
        discussArray: [
          {
            personImg: '/static/video/u1176.png',
            date: '04-05',
            time: '15:00',
            subject: '讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题',
            likeVal: 0,
            likeSrc: '/static/video/u1158.png',
            discussShow: false,
            showNum: 1,
            personName: '用户名',
            commentVal: 200,
            secondPerson: [
              {
                personImg: '/static/video/u1176.png',
                date: '04-05',
                time: '15:00',
                discussShow: false,
                likeSrc: '/static/video/u1158.png',
                repeatName: '',
                repeatContent: '',
                subject: '',
                likeVal: 0,
                personName: '用户名',
                discussFirst: ''
              },
              {
                personImg: '/static/video/u1176.png',
                date: '04-05',
                time: '15:00',
                discussShow: false,
                repeatName: '',
                repeatContent: '',
                subject: '',
                likeVal: 0,
                likeSrc: '/static/video/u1158.png',
                personName: '用户名',
                discussFirst: ''
              },
              {
                personImg: '/static/video/u1176.png',
                date: '04-05',
                time: '15:00',
                discussShow: false,
                repeatName: '',
                repeatContent: '',
                subject: '',
                likeVal: 0,
                likeSrc: '/static/video/u1158.png',
                personName: '用户名',
                discussFirst: ''
              }
            ]
          },
          {
            personImg: '/static/video/u1176.png',
            date: '04-05',
            time: '15:00',
            subject: '讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题',
            likeVal: 0,
            likeSrc: '/static/video/u1158.png',
            discussShow: false,
            showNum: 1,
            personName: '用户名',
            commentVal: 200,
            secondPerson: [
              {
                personImg: '/static/video/u1176.png',
                date: '04-05',
                time: '15:00',
                discussShow: false,
                likeSrc: '/static/video/u1158.png',
                repeatName: '',
                repeatContent: '',
                subject: '',
                likeVal: 0,
                personName: '用户名',
                discussFirst: ''
              },
              {
                personImg: '/static/video/u1176.png',
                date: '04-05',
                time: '15:00',
                discussShow: false,
                repeatName: '',
                repeatContent: '',
                subject: '',
                likeVal: 0,
                likeSrc: '/static/video/u1158.png',
                personName: '用户名',
                discussFirst: ''
              },
              {
                personImg: '/static/video/u1176.png',
                date: '04-05',
                time: '15:00',
                discussShow: false,
                repeatName: '',
                repeatContent: '',
                subject: '',
                likeVal: 0,
                likeSrc: '/static/video/u1158.png',
                personName: '用户名',
                discussFirst: ''
              }
            ]
          },
          {
            personImg: '/static/video/u1176.png',
            date: '04-05',
            time: '15:00',
            subject: '讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题',
            likeVal: 0,
            likeSrc: '/static/video/u1158.png',
            discussShow: false,
            showNum: 1,
            personName: '用户名',
            commentVal: 200,
            secondPerson: [
              {
                personImg: '/static/video/u1176.png',
                date: '04-05',
                time: '15:00',
                discussShow: false,
                likeSrc: '/static/video/u1158.png',
                repeatName: '',
                repeatContent: '',
                subject: '',
                likeVal: 0,
                personName: '用户名',
                discussFirst: ''
              },
              {
                personImg: '/static/video/u1176.png',
                date: '04-05',
                time: '15:00',
                discussShow: false,
                repeatName: '',
                repeatContent: '',
                subject: '',
                likeVal: 0,
                likeSrc: '/static/video/u1158.png',
                personName: '用户名',
                discussFirst: ''
              },
              {
                personImg: '/static/video/u1176.png',
                date: '04-05',
                time: '15:00',
                discussShow: false,
                repeatName: '',
                repeatContent: '',
                subject: '',
                likeVal: 0,
                likeSrc: '/static/video/u1158.png',
                personName: '用户名',
                discussFirst: ''
              }
            ]
          },
          {
            personImg: '/static/video/u1176.png',
            date: '04-05',
            time: '15:00',
            subject: '讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题',
            likeVal: 0,
            likeSrc: '/static/video/u1158.png',
            discussShow: false,
            showNum: 1,
            personName: '用户名',
            commentVal: 200,
            secondPerson: [
              {
                personImg: '/static/video/u1176.png',
                date: '04-05',
                time: '15:00',
                discussShow: false,
                likeSrc: '/static/video/u1158.png',
                repeatName: '',
                repeatContent: '',
                subject: '',
                likeVal: 0,
                personName: '用户名',
                discussFirst: ''
              },
              {
                personImg: '/static/video/u1176.png',
                date: '04-05',
                time: '15:00',
                discussShow: false,
                repeatName: '',
                repeatContent: '',
                subject: '',
                likeVal: 0,
                likeSrc: '/static/video/u1158.png',
                personName: '用户名',
                discussFirst: ''
              },
              {
                personImg: '/static/video/u1176.png',
                date: '04-05',
                time: '15:00',
                discussShow: false,
                repeatName: '',
                repeatContent: '',
                subject: '',
                likeVal: 0,
                likeSrc: '/static/video/u1158.png',
                personName: '用户名',
                discussFirst: ''
              }
            ]
          },
          {
            personImg: '/static/video/u1176.png',
            date: '04-05',
            time: '15:00',
            subject: '讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题',
            likeVal: 0,
            likeSrc: '/static/video/u1158.png',
            discussShow: false,
            showNum: 1,
            personName: '用户名',
            commentVal: 200,
            secondPerson: [
              {
                personImg: '/static/video/u1176.png',
                date: '04-05',
                time: '15:00',
                discussShow: false,
                likeSrc: '/static/video/u1158.png',
                repeatName: '',
                repeatContent: '',
                subject: '',
                likeVal: 0,
                personName: '用户名',
                discussFirst: ''
              },
              {
                personImg: '/static/video/u1176.png',
                date: '04-05',
                time: '15:00',
                discussShow: false,
                repeatName: '',
                repeatContent: '',
                subject: '',
                likeVal: 0,
                likeSrc: '/static/video/u1158.png',
                personName: '用户名',
                discussFirst: ''
              },
              {
                personImg: '/static/video/u1176.png',
                date: '04-05',
                time: '15:00',
                discussShow: false,
                repeatName: '',
                repeatContent: '',
                subject: '',
                likeVal: 0,
                likeSrc: '/static/video/u1158.png',
                personName: '用户名',
                discussFirst: ''
              }
            ]
          }
        ],
        total: 1000, // 默认数据总数
        pagesize: 1, // 每页的数据条数
        currentPage: 1, // 默认开始页面
        reviewData: {
          tags: [
            '快速评论1',
            '快速评论1',
            '快速评论1',
            '快速评论1'
          ],
          review: [
            {
              personImg: '/static/video/u1176.png',
              personName: '用户名',
              date: '04-05',
              time: '15:00',
              subject: '讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题讨论主题'
            }
          ]
        }
      }
    },
    methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`)
      },
      btnCollection() {
        this.isShow = !this.isShow
        this.txt = this.isShow ? '收藏' : '已收藏'
      },
      current_change: function (currentPage) {
        this.currentPage = currentPage
      },
      liveStu(item, index) {
        this.couList = index
      },
      visit(text, key) {
        this.isvisit = true
        this.selected = key
      }
    }
  }
</script>

<style scoped lang="stylus">
  .float
    float left

  .clear
    clear both

  img
    display block

  .center-box
    width: 1200px
    margin: 0 auto

  .main1
    margin-top 25px

  .live-room
    margin-left 15px
    width 1100px

  .live-top
    font-size 18px
    font-weight 400

  .live-bottom
    margin-top 8px
    p
      font-size 14px
      color #999
      margin-right 30px
      line-height 25px
    button
      display block
      float right
      width 110px
      height 25px
      border-radius 12.5px
      border none
      background-color rgb(0, 143, 149)
      outline none
      cursor pointer
      color white

  .main2
    margin-top 10px
    margin-bottom 22px

  .video
    width 870px
    height 570px

  .chat-room
    float right
    width 330px

  .nav
    .float
      width 110px
      height 40px
      text-align center
      line-height 40px
      font-size 14px
      background-color: rgba(238, 238, 238, 1)
      cursor pointer
      color #666

  .bg-recover
    background-color #fff !important

  .bg-cou
    background-color #fff !important
    color #FF9933 !important
    border-left 3px solid #FF9933

  .answer
    height 516px
    background-color #F5F5F5

  .answer-content
    font-size 12px
    line-height 20px
    height 482px
    overflow-y auto
    overflow-x hidden

  /*display flex*/
  /*flex-direction column-reverse*/

  .name
    margin-left 18px
    color #008F95

  .quiz-content
    width 265px
    border-radius 1px
    color #999
    padding 0 2px
    box-sizing border-box
    word-wrap break-word
    word-break break-all
    overflow: hidden

  .quiz
    width 330px
    border 1px solid rgb(204, 204, 204)
    height 48px
    position relative
    box-sizing border-box
    input
      height 29px
      margin-top 6.5px
      border-radius 5px 0px 0px 5px
      width 238px
      padding-left 10px
      margin-left 8px
      outline none
    button
      background-color rgb(0, 143, 149)
      color #fff
      width 60px
      height 35px
      border none
      cursor pointer
      border-radius 0 5px 5px 0
      position absolute
      top 5px
      right 5px

  .lesson
    padding-top 18px
    padding-left 18px
    color #999
    font-size 14px
    h1
      font-size 18px
      font-weight 700
      line-height 36px
    .teacher
      line-height normal

  .strong
    font-weight 700
    line-height normal

  .detail
    width 242px
    line-height normal

  .introduce
    margin-left 14px

  .teacher-intro
    padding-top 20px
    color #999

  .teacher-top
    width fit-content
    margin 0 auto

  .intro-top
    font-size 16px
    font-weight 700
    line-height 40px

  .intro-bottom
    font-size 14px
    .float
      margin-right 5px

  .teacher-bottom
    margin-top 10px
    margin-left 18px
    font-size 14px

  .shoucang
    float right
    width 110px
    height 25px
    line-height 25px
    text-align center
    color #fff
    /*background-color #008F95 !important*/
    border-radius 15px
    cursor pointer
    user-select none
    font-size 14px

  .gray
    background-color #FF9933

  .green
    background-color #999

  .quiz .send
    z-index 20

  .quiz .noSend
    background-color #ccc

  .quiz-person
    margin 5px 0

  .student
    width 1200px
    min-height 700px
    margin 0 auto
    border 1px solid #999
    overflow hidden

  .liveCourse
    width 171px
    height 63px
    line-height 63px
    background-color #F2F2F2
    color #999
    text-align center
    margin-bottom 2px
    cursor pointer

  .studentL
    float left

  .studentR
    width 940px
    float right
    margin-right 35px

  .headCenter
    float right
    width 780px
    .headName
      position relative
      .userName
        font-size 18px
        font-weight 700
      .collect
        display inline-block
        width 70px
        height 28px
        line-height 28px
        text-align center
        border 1px solid #999
        color #999
        border-radius 5px
        position absolute
        right 0
        cursor pointer
    .nodeTitle
      font-size 18px
      margin-top 10px
    .nodeCenter
      font-size 14px
      overflow hidden
      text-overflow ellipsis
      display -webkit-box
      -webkit-box-orient vertical
      -webkit-line-clamp 4
      margin 10px 0
    .nodeImg
      display inline-block
      img
        margin-right 10px
    .headBottom
      margin 20px 0
      color #666
      span
        margin-right 20px
      .praise
        display inline-block
        margin-left 360px
        img
          display inline-block
      .reply
        display inline-block
        img
          display inline-block

  .nodeList
    width 860px
    overflow hidden
    position relative
    margin 20px 0
    .wire
      width 100%
      height 2px
      position absolute
      left 0
      bottom 0

  .headPortrait
    float left
</style>
